﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery EasyUI Extensions - Panel</title>

    <link href="../../jquery-easyui-themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../jquery-easyui-themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../../jquery/jquery-1.11.2.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../../jquery-extensions/jquery.jdirk.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.js"></script>
    
    <link href="../../jeasyui-extensions/jeasyui.extensions.css" rel="stylesheet" type="text/css" />
    <script src="../../jeasyui-extensions/jeasyui.extensions.panel.js"></script>

    <script src="../../jeasyui-extensions/jeasyui.extensions.messager.js"></script>

    <script type="text/javascript">
        $(function () {
            
            var p = $("#p1");

            $("#btn1").click(function () {
                alert(p.panel("isRegion"));
            });

            $("#btn2").click(function () {
                alert(p.panel("isTab"));
            });

            $("#btn3").click(function () {
                alert(p.panel("isAccordion"));
            });

            $("#btn4").click(function () {
                alert(p.panel("isWindow"));
            });

            $("#btn5").click(function () {
                alert(p.panel("isDialog"));
            });


            $("#btn11").click(function () {
                p.panel("setTitle", "new title");
            });

            $("#btn12").click(function () {
                alert(p.panel("header").length);
            });

            $("#btn13").click(function () {
                alert(p.panel("iframe").attr("src"));
            });

            $("#btn14").click(function () {
                p.panel("refresh", "jEasyUIExtensions-Messager.html");
            });





            $("#btn31").click(function () {
                $.extend($.messager.defaults, { ok: "确认删除", cancel: "取消返回" });
                $.messager.confirm("操作提醒", "你要打死这个<span style='color: red;'>红色</span>的逗逼？", "");
            });

        });
    </script>
</head>
<body class="easyui-layout" data-options="fit: true">
    <div id="south" data-options="region: 'south', title: 'south', split: true" style="height: 100px;"></div>
    <div id="west" data-options="region: 'west', title: 'west', split: true" style="width: 200px;">
        <div class="easyui-accordion" data-options="fit: true, border: false">
            <div id="accordion1" data-options="title: 'Accordion1'"></div>
            <div id="accordion2" data-options="title: 'Accordion2'"></div>
            <div id="accordion3" data-options="title: 'Accordion3'"></div>
            <div id="accordion4" data-options="title: 'Accordion4'"></div>
        </div>
    </div>

    <div id="center" data-options="region: 'center', title: 'center', split: true">
        <div class="easyui-tabs" data-options="fit: true, border: false">
            <div id="tab1" data-options="title: 'Tab1'" style="padding: 20px;">
                <div id="p1" class="easyui-panel" data-options="
                     title: 'test panel', width: 520, height: 360,
                     iniframe: true, href: 'jEasyUIExtensions-Menu.html'
                     "></div>
                <hr />
                <a id="btn1" class="easyui-linkbutton" href="javascript: void(0);">isRegion</a>
                <a id="btn2" class="easyui-linkbutton" href="javascript: void(0);">isTab</a>
                <a id="btn3" class="easyui-linkbutton" href="javascript: void(0);">isAccordion</a>
                <a id="btn4" class="easyui-linkbutton" href="javascript: void(0);">isWindow</a>
                <a id="btn5" class="easyui-linkbutton" href="javascript: void(0);">isDialog</a>
                <hr />
                <a id="btn11" class="easyui-linkbutton" href="javascript: void(0);">setTitle</a>
                <a id="btn12" class="easyui-linkbutton" href="javascript: void(0);">getHeader</a>
                <a id="btn13" class="easyui-linkbutton" href="javascript: void(0);">getIframe</a>
                <a id="btn14" class="easyui-linkbutton" href="javascript: void(0);">refresh</a>

                <hr />
                <a id="btn31" class="easyui-linkbutton" href="javascript: void(0);">easyui-messager-config</a>

                <!--<div id="p2" class="easyui-window" data-options="
                     title: 'test window', width: 600, height: 400,
                     minWidth: 300, maxWidth: 800,
                     minHeight: 300, maxHeight: 600
                     "></div>-->
                <!--<div id="p3" class="easyui-dialog" data-options="title: 'test dialog', width: 600, height: 400,
                     toolbar: [
                        { text: '确定', iconCls: 'icon-ok', handler: function () { alert(1); } }
                     ],
                     buttons: [
                        { text: '确定', iconCls: 'icon-ok', handler: function () { alert(1); } }
                     ]
                     ">
                    asdf
                </div>-->
            </div>
        </div>
    </div>

    <div id="east" data-options="region: 'east', title: 'east', split: true" style="width: 200px;"></div>
    <div id="north" data-options="region: 'north', title: 'north', split: true" style="height: 100px;"></div>
</body>
</html>
